import React, { useEffect, useState } from 'react';
import './index.less';
import AMapLoader from '@amap/amap-jsapi-loader';
import { history } from 'umi';
// import '../../../public/download/font_4238832_nunxwq8b4n/iconfont.css';
import '../../../../public/download/font_4238832_nunxwq8b4n/iconfont.css';
import { useLocation } from 'umi';
function near(Props) {
  let [autoflag, setautoflag] = useState(true);
  let [doorflag, setdoorflag] = useState(true);
  let loca = useLocation();
  const data = loca.state.state;
  console.log(data);
  // console.log(loca.state.state[0].key);
  // 当前位置
  let [lng, setlng] = useState(null);
  let [lat, setlat] = useState(null);

  //获取自动垃圾的位置point
  let [rlng, setRlng] = useState(null);
  let [rlat, setRlat] = useState(null);

  useEffect(() => {
    window._AMapSecurityConfig = {
      securityJsCode: 'c5a4f911d5b2f69ffa9fa59b1cc87e78',
    };
    AMapLoader.load({
      key: 'e1f9aee25e1fbfc02d6a6f14a2639e57',
      version: '2.0',
      plugins: ['AMap.Marker', 'AMap.Driving'],
    }).then((AMap) => {
      // JS API加载完成后获取AMap对象
      const map = new AMap.Map('map', {
        viewMode: '2D', // 默认使用 2D 模式
        zoom: 13, //初始化地图层级
        center: [115.498894, 38.814082], //初始化地图中心点
      });
      //添加浏览器定位
      map.plugin('AMap.Geolocation', function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认：true
          timeout: 10000, // 设置定位超时时间，默认：无穷大
          offset: [10, 20], // 定位按钮的停靠位置的偏移量
          zoomToAccuracy: true, //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          position: 'LB', //  定位按钮的排放位置,  RB表示右下
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function (status, result) {
          // console.log(status, 77);
          if (status == 'complete') {
            onComplete(result);
          } else {
            onError(result);
          }
        });
        function onComplete(data) {
          // data是具体的定位信息
          // console.log(data);
          setlng(data.position.lng);
          setlat(data.position.lat);
          // 创建一个自定义的div元素

          var customDiv = document.createElement('div');
          customDiv.className = 'point';
          // 创建一个Marker对象
          var marker = new AMap.Marker({
            position: [data.position.lng, data.position.lat], // 设置位置坐标
          });
          // 将自定义的div添加到Marker对象
          marker.setContent(customDiv);
          // 将Marker添加到地图上
          map.add(marker);

          //自动垃圾回收
          let automatic = [
            { lng: data.position.lng + 0.001, lat: data.position.lat + 0.001 },
            { lng: data.position.lng - 0.001, lat: data.position.lat - 0.001 },
          ];
          automatic.forEach((item) => {
            // 创建一个自定义的div元素
            var customDiv = document.createElement('div');
            customDiv.className = 'automatic';
            customDiv.innerHTML =
              '<span class="iconfont icon-shangmenhuishouguanli"></span>';
            // 创建一个Marker对象
            var marker = new AMap.Marker({
              position: [item.lng, item.lat], // 设置位置坐标
            });
            // 将自定义的div添加到Marker对象
            marker.setContent(customDiv);
            // 将Marker添加到地图上
            if (autoflag) {
              map.add(marker);
            }
          });

          // 上门回收
          let doorrabish = [
            {
              lng: data.position.lng + 0.0023,
              lat: data.position.lat + 0.0001,
            },
            {
              lng: data.position.lng - 0.0023,
              lat: data.position.lat - 0.0001,
            },
          ];
          doorrabish.forEach((item) => {
            // 创建一个自定义的div元素
            var customDiv = document.createElement('div');
            customDiv.className = 'doorrabish';
            customDiv.innerHTML = '<span class="iconfont icon-ai49"></span>';
            customDiv.onclick = function () {
              console.log(123);
            };
            // 创建一个Marker对象
            var marker = new AMap.Marker({
              position: [item.lng, item.lat], // 设置位置坐标
            });
            // 将自定义的div添加到Marker对象
            marker.setContent(customDiv);
            // 将Marker添加到地图上
            if (doorflag) {
              map.add(marker);
            }
          });

          // 路线
        }

        function onError(data) {
          // 定位出错
          console.log(data, 111);
        }
      });
      //添加路线的
      map.plugin('AMap.Driving', function () {
        var driving = new AMap.Driving({
          map: map,
          // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
          policy: AMap.DrivingPolicy.LEAST_TIME,
        });
        var startLngLat = [115.498894, 38.814082];
        var endLngLat = [data[0].num, data[0].nums];

        driving.search(
          new AMap.LngLat(startLngLat[0], startLngLat[1]),
          new AMap.LngLat(endLngLat[0], endLngLat[1]),
          {
            // waypoints: [new AMap.LngLat(114.317433, 30.55351)],
          },
          function (status, result) {
            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
            if (status === 'complete') {
              console.log('绘制驾车路线完成');
            } else {
              console.log('获取驾车数据失败：' + result);
            }
          },
        );
      });
    });

    localStorage.setItem('ak', JSON.stringify(data));
  });
  //门店收缩
  const show = () => {
    const drawer = document.querySelector('.storeData');
    drawer.classList.toggle('hidden');
  };
  return (
    <div id="Near">
      <div id="map"></div>

      <div className="storeData">
        <div
          onClick={() => {
            show();
          }}
          className="storeData_btn"
        >
          <div className="jie"> 待接单</div>
          <div className="you">{data[0].key}#</div>
        </div>
        <div className="heng">
          <div className="a1">
            <img
              src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/%E8%AE%A2%E5%8D%95/u13460.png"
              alt=""
            />
          </div>
          <div className="b1">{data[0].city}</div>
          <div className="c1">距离{data[0].distance}km</div>
        </div>
        <div className="heng">
          <div className="a1">
            <img
              src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/%E8%AE%A2%E5%8D%95/u13474.png"
              alt=""
            />
          </div>
          <div className="b1">
            上门时间: <span>{data[0].time}</span>
          </div>
        </div>
        <div className="heng">
          <div className="a1"></div>
          <div className="b1">
            联系方式: <span>{data[0].dan}</span>
          </div>
        </div>
        <div className="heng">
          <div className="a1"></div>
          <div className="b1">
            回收内容: <span>塑料</span>
          </div>
        </div>
        <div className="heng">
          <div className="a1"></div>
          <div className="b1">
            预计重量: <span>2KG</span>
          </div>
        </div>
        <div className="heng">
          <div className="a1"></div>
          <div className="b1">
            备注: <span>需要协助分类</span>
          </div>
        </div>
        <div className="xia">
          <div className="j">
            <img
              src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/%E5%BE%85%E6%8E%A5%E5%8D%95%E8%AF%A6%E6%83%85/u13705.png"
              alt=""
            />
          </div>
          <div className="k">
            <img
              src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/%E5%BE%85%E6%8E%A5%E5%8D%95%E8%AF%A6%E6%83%85/u13708.png"
              alt=""
            />
          </div>
          <div className="l" onClick={() => history.push('/qishou/jiedan')}>
            已到达
          </div>
        </div>
      </div>
    </div>
  );
}

export default near;
